import QtQuick 1.1

Item {
    id: top_menu
    width: root_width
    height: root_height
    state: state_text

    property int root_width: 400
    property int root_height: 220
    property string state_text: "hide"
    property string title_text: "testtest"
    property string button0_text: "search"
    property string button1_text: "bussea"
    property string button2_text: "bussta"
    property string button3_text: "drive"

    signal button0_click()
    signal button1_click()
    signal button2_click()
    signal button3_click()

    function hide()
    {
        state = "hide";
    }

    Rectangle {
        id: rectangle_bg
        color: "#000000"
        anchors.fill: parent
    }

    Item {
        id: item_title
        x: 0
        y: 247
        width: 400
        height: 53
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
//        color: "#00276b"
        Rectangle {
            id: rectangle_circle
            y: 9
            width: height
            height: parent.height - 8
            color: "#00000000"
            radius: 97
            anchors.left: parent.left
            anchors.leftMargin: 15
            anchors.verticalCenter: parent.verticalCenter
            smooth: true
            border.color: "#ffffff"
            border.width: 3

            Rectangle {
                id: rectangle1
                x: 6
                y: 18
                width: 10
                height: 10
                color: "#ffffff"
                radius: 5
                smooth: true
            }

            Rectangle {
                id: rectangle2
                x: 9
                y: 17
                width: 10
                height: 10
                color: "#ffffff"
                radius: 5
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                smooth: true
            }

            Rectangle {
                id: rectangle3
                x: 30
                y: 18
                width: 10
                height: 10
                color: "#ffffff"
                radius: 5
                smooth: true
            }
        }

        Text {
            id: text_title
            x: 109
            y: 17
            color: "#ffffff"
            text: title_text
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 33
        }

        Rectangle {
            id: rectangle_line1
            y: 61
            width: parent.width
            height: 1
            color: "#ffffff"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.left: parent.left
        }

        Rectangle {
            id: rectangle_line2
            x: 2
            width: parent.width
            height: 1
            color: "#ffffff"
            anchors.top: parent.top
            anchors.topMargin: 0
            anchors.leftMargin: 0
            anchors.left: parent.left
        }

        MouseArea {
            id: mouse_area1
            anchors.fill: parent

            onClicked:
            {
                top_menu.state == "" ? top_menu.state = "hide" : top_menu.state = "";
            }
        }
    }

    Grid {
        id: grid_buttons
        height: parent.height - item_title.height - 30
        spacing: 11
        anchors.right: parent.right
        anchors.rightMargin: 15
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.top: parent.top
        anchors.topMargin: 15
        rows: 2
        columns: 2

        Mbutton {
            id: mbutton0
            textstring: button0_text
            pro_height: 60
            text_size: 22
            pro_width: 180

            onButtonclick:
            {
                button0_click();
            }
        }

        Mbutton {
            id: mbutton1
            x: -4
            y: -7
            textstring: button1_text
            pro_width: 180
            pro_height: 60
            text_size: 22

            onButtonclick:
            {
                button1_click();
            }
        }

        Mbutton {
            id: mbutton2
            x: 7
            y: -8
            textstring: button2_text
            pro_width: 180
            pro_height: 60
            text_size: 22

            onButtonclick:
            {
                button2_click();
            }
        }

        Mbutton {
            id: mbutton3
            x: -1
            y: 1
            textstring: button3_text
            pro_width: 180
            pro_height: 60
            text_size: 22

            onButtonclick:
            {
                button3_click();
            }
        }
    }
    states: [
        State {
            name: "hide"

            PropertyChanges {
                target: grid_buttons
                height: 0
                opacity: 0
            }

            PropertyChanges {
                target: top_menu
                height: item_title.height
            }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "hide"
            SequentialAnimation {
                PropertyAnimation { target: grid_buttons; property: "opacity"; easing.type: Easing.OutCubic;}
//                PropertyAnimation { target: grid_buttons; property: "height"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: top_menu; property: "height"; easing.type: Easing.OutCubic;}
            }
        },
        Transition {
            from: "hide"
            to: ""
            SequentialAnimation {
                PropertyAnimation { target: top_menu; property: "height"; easing.type: Easing.OutCubic;}
//                PropertyAnimation { target: grid_buttons; property: "height"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: grid_buttons; property: "opacity"; easing.type: Easing.OutCubic;}
            }
        }
    ]

}
